<template>
	<view class="qiun-columns">
		<view class="qiun-charts">
			<canvas canvas-id="canvasPie" id="canvasPie" class="charts" @touchstart="touchPie"></canvas>
		</view>
	</view>
</template>

<script>
	import uCharts from '@/common/u-charts/u-charts.js';
	var _self;
	var canvaPie = null;

	export default {
		data() {
			return {
				cWidth: '',
				cHeight: '',
				pixelRatio: 1,
				colors:'',
				chartData: [{
						"name": "启动",
						"data": 50
					}, {
						"name": "监控",
						"data": 30
					}, {
						"name": "执行",
						"data": 20
					}, {
						"name": "关闭",
						"data": 18
					}, {
						"name": "计划",
						"data": 8
					}]
			}
		},
		props:{
			Obj:Object
		},
		methods: {
			getServerData(data) {
				this.colors = [];
				this.chartData = [];
				for(let item of data){
					this.colors.push(item.color)
					this.chartData.push({"name":item.label,"data":parseInt(item.total)})
				}
				
				let Pie = {
					series: []
				};
				//这里我后台返回的是数组，所以用等于，如果您后台返回的是单条数据，需要push进去
				// Pie.series = this.chartData.series;
				_self.showPie("canvasPie");
			},
			showPie(canvasId) {
				canvaPie = new uCharts({
					$this: _self,
					canvasId: canvasId,
					type: 'pie',
					fontSize: 11,
					legend: {
						show: false
					},
					background: '#FFFFFF',
					pixelRatio: _self.pixelRatio,
					series: this.chartData,
					animation: true,
					width: _self.cWidth * _self.pixelRatio,
					height: _self.cHeight * _self.pixelRatio,
					dataLabel: true,
					colors:this.colors,
					extra: {
						pie: {
							lableWidth: 15,
							borderColor:'#FFFFFF',
							border:true
						}
					},
				});
			},
			touchPie(e) {
				canvaPie && canvaPie.showToolTip(e, {
					format: function(item) {
						return item.name + ':' + item.data
					}
				});
			},
		},
		watch:{
			Obj:function(val){
				this.getServerData(val)
			}
		},
		created() {
			_self = this;
			this.cWidth = uni.upx2px(750);
			this.cHeight = uni.upx2px(500);
		}
	}
</script>

<style>
	page {
		background: #F2F2F2;
		width: 750upx;
		overflow-x: hidden;
	}

	.qiun-padding {
		padding: 2%;
		width: 96%;
	}

	.qiun-wrap {
		display: flex;
		flex-wrap: wrap;
	}

	.qiun-rows {
		display: flex;
		flex-direction: row !important;
	}

	.qiun-columns {
		display: flex;
		flex-direction: column !important;
	}

	.qiun-common-mt {
		margin-top: 10upx;
	}

	.qiun-bg-white {
		background: #FFFFFF;
	}

	.qiun-title-bar {
		width: 96%;
		padding: 10upx 2%;
		flex-wrap: nowrap;
	}

	.qiun-title-dot-light {
		border-left: 10upx solid #0ea391;
		padding-left: 10upx;
		font-size: 32upx;
		color: #000000
	}

	.qiun-charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}

	.charts {
		width: 750upx;
		height: 500upx;
		background-color: #FFFFFF;
	}
</style>
